﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Dynamic LMCA Z-Score Charting!</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="scripts/calcsForChart.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function() {
        var i = 3;

        $('a#add').click(function() {
            if (i <= 12) {
                var str = '<tr><th>t<sub>' + i; //row header
                str += '</sub></th><td><input id="ht' + i + '" type="text" onchange="updateRow(' + i + ')" /></td>'; //height input
                str += '<td><input id="wt' + i + '" type="text" onchange="updateRow(' + i + ')" /></td>'; //weight input
                str += '<td><input id="lmca' + i + '" type="text" onchange="updateRow(' + i + ')" /></td>'; //lmca input
                str += '<td class="results" id="bsa' + i + '">&nbsp;</td>'; //bsa results
                str += '<td class="results" id="lmcaZ' + i + '">&nbsp;</td></tr>'; //zscore results

                $(str).appendTo('#lmcaData>tbody');
                i++;
            }
        });

        $('a#remove').click(function() {
            if (i >= 4) {
                $('#lmcaData>tbody>tr:last').remove();
                i--;
            }
        });

        $('#btnGraphIt').click(function() {
        //send 'i' to the graphing function as the number of records
            GraphIt(i - 1);
        });
    });
    </script>


</head>
<body>

    <div id="JTable">
        <table id="lmcaData">
            <thead>
                <tr>
                    <td>
                    </td>
                    <th>
                        Height
                        (cm)
                    </th>
                    <th>
                        Weight
                        (kg)
                    </th>
                    <th>
                        LMCA (mm)
                    </th>
                    <th>
                        BSA
                    </th>
                    <th>
                        Z-Score
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>
                        t<sub>0</sub>
                    </th>
                    <td>
                        <input id="ht0" type="text" onchange="updateRow(0)"/>
                    </td>
                    <td>
                        <input id="wt0" type="text" onchange="updateRow(0)"/>
                    </td>
                    <td>
                        <input id="lmca0" type="text" onchange="updateRow(0)"/>
                    </td>
                    <td class="results" id="bsa0">
                        &nbsp;
                    </td>
                    <td class="results" id="lmcaZ0">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <th>
                        t<sub>1</sub>
                    </th>
                    <td>
                        <input id="ht1" type="text" onchange="updateRow(1)"/>
                    </td>
                    <td>
                        <input id="wt1" type="text" onchange="updateRow(1)"/>
                    </td>
                    <td>
                        <input id="lmca1" type="text" onchange="updateRow(1)"/>
                    </td>
                    <td class="results" id="bsa1">
                        &nbsp;
                    </td>
                    <td class="results" id="lmcaZ1">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <th>
                        t<sub>2</sub>
                    </th>
                    <td>
                        <input id="ht2" type="text" onchange="updateRow(2)"/>
                    </td>
                    <td>
                        <input id="wt2" type="text" onchange="updateRow(2)"/>
                    </td>
                    <td>
                        <input id="lmca2" type="text" onchange="updateRow(2)"/>
                    </td>
                    <td class="results" id="bsa2">
                        &nbsp;
                    </td>
                    <td class="results" id="lmcaZ2">
                        &nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
<a href="#" id="add">Add Row</a><br />
<a href="#" id="remove">Remove Row</a>    
<div>
<input id="btnGraphIt" type="button" value="Graph It!" />
</div>
<div id="charts">
    
        <table>
            <tr>
                <td>
                    <h3>LMCA(mm) vs. Time</h3></td>
                <td>
                    <h3>LMCA Z-Score vs. Time</h3>
</td>
            </tr>
            <tr>
                <td>
                            <img name="lmcaGraph" alt="Coronary Artery Measurement Time Series Graph" 
                                src="images/placeholder1.png" />
</td>
                <td>
                            <img name="zscoreGraph" alt="Coronary Artery Z-Score Time Series Graph" 
                                src="images/placeholder2.png" />
</td>
            </tr>
        </table>
            
    <p>
    </p>
    <p>
    </p>
    
</div>
</div>
</body>
</html>
